<template>
	<div class="oneMain">
		<div class="tools">
			<div>
				<el-button class="backBtn" type="primary" size="mini" @click="back()">返回</el-button>
			</div>
			<div>
				<el-tooltip class="item" effect="light" content="扫描报告导出Excel" placement="bottom">
					<el-button size="small" class="excel" @click="downloadExcle()"><span class="iconfont icon-excel"></span>
					</el-button>
				</el-tooltip>
<!-- 				<el-tooltip class="item" effect="light" content="扫描报告导出Word" placement="bottom">
					<el-button size="small" class="word" @click="downloadWord()"><span class="iconfont icon-Word"></span>
					</el-button>
				</el-tooltip> -->
				<el-button icon="el-icon-refresh" size="small" class="btn refBtn btnRight" @click="refreshTable"></el-button>
			</div>
		</div>
		<div class="tableContent">
			<el-table ref="table" height="679" :data="tableData" tooltip-effect="light" size="small" v-loading="loading" class="table">
				<el-table-column type="index" label="序号" width="70" :resizable="false" key="indexOOO"></el-table-column>
				<el-table-column v-for="(item, key) in tableCloumn" :prop="item.prop" :key="key" :resizable="false" :label="item.label"
				 :min-width="item.width" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ getDisplay(scope) }}
					</template>
				</el-table-column>
				<el-table-column prop="percentage" label="严重程度" key="precentage" width="200">
					<template slot-scope="scope">
						<el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.severity * 10" :color="customColors"
						 :format="format"></el-progress>
					</template>
				</el-table-column>
			</el-table>
			<!-- <el-row class="page">
					<el-pagination @current-change="changePage" :current-page.sync="currentPage" :page-size.sync="pageSize" layout="prev, pager, next,jumper,->,total"
					 :total="total"></el-pagination>
				</el-row> -->
		</div>
	</div>
</template>

<script>
	import tablePublic from '@/mixins/tablePublic'
	export default {
		name: 'report',
		mixins: [tablePublic],
		data() {
			return {
				tableUrl: 'getReportById',
				tableCloumn: [{
						prop: 'cveName',
						label: '详情',
						width: '100',
					},
					{
						prop: 'cve',
						label: 'CVE编号',
						width: '100',
					},
				],
				taskId: '',
				customColors: [{
						color: '#e59647',
						percentage: 70,
					},
					{
						color: '#e44949',
						percentage: 100,
					},
					{
						color: '#44bc45',
						percentage: 39.999,
					},
				],
			}
		},
		created() {
			let _this = this
			let query = _this.$route.query
			if (query && query.taskId) {
				_this.taskId = query.taskId
				//_this.search.name = query.dname;
			} else {
				_this.$router.push({
					path: '/scan/list',
				})
			}
		},
		methods: {
			back() {
				let _this = this
				_this.$router.push({
					path: '/scan/list',
				})
			},
			//获取当前页数据
			async getTableData() {
				let _this = this
				_this.loading = true
				let res = await _this.$api.getRequest(null, _this.tableUrl, _this.taskId)
				_this.loading = false
				if (res.code == 500) {
					_this.$message({
						message: res.data.message,
						type: 'warning',
					})
				} else {
					//_this.total = res.total;
					// console.log(res);
					// _this.tableData = res[0].gasReportList
					_this.tableData = res
				}
				let table = this.$refs.table
				if (table) {
					let scrollTop = table.bodyWrapper
					if (scrollTop) {
						scrollTop.scrollTop = 0
					}
				}
			},
			format(percentage) {
				if (percentage > 0 && percentage < 40) {
					return `${parseFloat(percentage / 10).toFixed(1)}（低）`
				}
				if (percentage >= 40 && percentage <= 70) {
					return `${parseFloat(percentage / 10).toFixed(1)}（中）`
				}
				if (percentage > 70 && percentage <= 100) {
					return `${parseFloat(percentage / 10).toFixed(1)}（高）`
				}
			},
			async downloadExcle() {
				let _this = this;
				let param = {
					taskId: _this.taskId,
				};
				let res = await _this.$api.downloadPost(param, 'exportExcel');
				if (res.code) {} else {
					let url = window.URL.createObjectURL(
						new Blob([res.data], {
							type: "application/vnd.ms-excel;charset=utf-8"
						})
					);
					let name;
					if (res.fileName) {
						name = res.fileName.split("=")[1];
					} else {
						name = new Date();
					}
					let link = document.createElement("a");
					link.style.display = "none";
					link.href = url;
					link.setAttribute("download", name);
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				}
			},
			async downloadWord() {
				let _this = this;
				let param = {
					taskId: _this.taskId,
				};
				let res = await _this.$api.downloadPost(param, 'exportWord');
				if (res.code) {} else {
					let url = window.URL.createObjectURL(
						new Blob([res.data], {
							type: "application/msword;charset=utf-8"
						})
					);
					let name;
					if (res.fileName) {
						name = res.fileName.split("=")[1];
					} else {
						name = new Date();
					}
					let link = document.createElement("a");
					link.style.display = "none";
					link.href = url;
					link.setAttribute("download", name);
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				}
			},
		},
	}
</script>

<style lang="scss">
	$background: #fff;

	.el-progress-bar__inner {
		border-radius: 0 !important;
	}

	.el-progress-bar__outer {
		border-radius: 0 !important;
		background-color: #dadada !important;
	}

	.el-tooltip__popper.is-light {
		background-image: linear-gradient(#65dcfa, #8adef3);
		color: #fff;
		border: 1px solid #00c6f8f8;
	}

	.backBtn {
		font-size: 12px !important;
		/* font-weight: bold; */
		margin-left: 5px;
		margin-top: 5px;
		/* font-family: "Hiragino Sans GB"; */
		background-image: linear-gradient(#01a844, #b9dd90);
		border: none;
	}

	.backBtn:hover {
		background-image: linear-gradient(#01a844, #b9dd90);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}

	.excel {
		position: absolute;
		top: 5px;
		right: 60px;
		padding: 6.5px 12px;
		background-image: linear-gradient(#6e9bfb, #91ddfb);
		border: none;
		color: #fff !important;
	}

	.excel:hover {
		background-image: linear-gradient(#bbe0ff, #6eb0fb);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}
	.word {
		position: absolute;
		top: 5px;
		right: 108px;
		padding: 6.5px 12px;
		background-image: linear-gradient(#6e9bfb, #91ddfb);
		border: none;
		color: white !important;
	}

	.word:hover {
		background-image: linear-gradient(#bbe0ff, #6eb0fb);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}

	.el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after {
		border-bottom-color: #65dcfa;
	}

	.el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow {
		border-bottom-color: #00c6f8f8;
	}

	.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after {
		border-top-color: #65dcfa;
	}

	.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow {
		border-top-color: #00c6f8f8;
	}
</style>
